const path = require('path');//webpack自带的路由地址
const { VueLoaderPlugin } = require('vue-loader') // 引入vue-loader
const webpack  = require('webpack') //引入webpack
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode:'development',
    entry: './main.js',//字符串 数组 对象 需要打包的入口文件
    output: {
        path: path.resolve(__dirname, './dist'),//打包后需要放进去的文件夹
        filename: 'bundle.js'//打包后的文件名字
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]//loader支撑
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve:{
        alias:{
            "vue$":"vue/dist/vue.esm.js"
        }
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin(),
        new webpack.BannerPlugin('最终版权归王发发所有'),
        new HtmlWebpackPlugin({
            template:"./index.html"
        })
    ],
    devServer: {
        static: {
            directory: path.join(__dirname, './dist'),
        },
        compress: true,
        port: 8080,
    },
};
// 要用vue-
// 下载
// main.js里面引入
// 打包(没报错)
// 运行起来的时候浏览器报错
// 更改成vue的模块化的配置
// 版本错了，从新下载vue 2.6.14版本
// npm install vue@2.6.14

// .vue的文件 写在新建的一个components里面 
// 引入进需要打包的js文件
// 打包=>报错(webpack不认识.vue)
// vue-loader下载 
// vue2.6.14  的版本 最新的vue-loader版本不兼容
// 在package.json 里面改一下vue-loader => 15.9.8
// 组件要注册啊

// 每次更新 => 打包 =>自动打包
// webpack-dev-server(去官网搜，有下载地址)
// 配置文件去哪儿 devserver(cli的配置文件去copy)
// 去package.json => scripts + ("dev":"webpack-dev-server --open")
// npm run dev 就可以热启动项目

// gulp和webpack有什么区别 一个是基于事件去打包 一个是基于模块化去打包
// 我用webpack去打包一个css文件需要下什么东西
// 热启动